const WeekArray = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
var month_order_count,total_profit
// 主函数入口
$(function () {
    // 为弹出的模态框绑定单击事件
    // GetClickDay();
    $('#id_marryTime').addClass('input')
    GetClickMonth();
    BindClickOnButton();
    ShowMyTime();
    // 为订单管理绑定点击事件：下拉菜单日期选择器
    // $('.modal-body input:last-child').flatpickr();
    // 页面加载完成后即时进行一次ajax请求，获取图表数据
    $.ajax({
        url: '/personal/charts/',
        type: 'Get',
        dataType: 'json',
        success(res) {
            if (res.status) {
                month_order_count=res.month_order_count;
                total_profit = res.total_profit
                // console.log(total_profit);
                MyCharts(month_order_count, total_profit);
            }
        }
    })
})



// 为日历翻页按钮绑定事件
function BindClickOnButton() {
    $('#calendar').click(function (e) {
        let year_month = GetClickMonth();
        let dataform = {'yearmonth': year_month};
        let click_dom = e.target;
        if ($(click_dom).is('i') || $(click_dom).is('button')) {
            GetClickMonth();
            GetClickDay();
            $.ajax({
                url: '/personal/judge/',
                type: 'POST',
                data: dataform,
                dataType: 'json',
                success(res) {
                    if (res.status) {
                        $("#completed").empty();
                        $.each(res.task_completed, function (name, data) {
                            let pjq = $("<p>" + data + "</p>");
                            $("#completed").append(pjq)
                        })
                        $("#incomplete").empty();
                        $.each(res.task_incomplete, function (name, data) {
                            let pjq = $("<p>" + data + "</p>");
                            $("#incomplete").append(pjq)
                        })
                    }
                }
            })
        }
    })
}

// 获取日期相关
function ShowMyTime() {
    const date = new Date();
    let year = date.getFullYear();
    let month = date.getUTCMonth() + 1;
    month = month.toString().padStart(2, '0');
    let day = date.getDate();
    let weekday = date.getDay();
    let hour = date.getHours();
    let min = date.getMinutes();
    // console.log(day+"/"+month+WeekArray[weekday]);
    $('#day-month').text(month + "/" + day);
    $('#week-show').text(WeekArray[weekday]);
    // $('.date-today').text(year + '.' + month + '.' + day);
    $('#id-task-time').val(year + '-' + month + '-' + day + ' ' + hour + ':' + min);
    // $('.info-title p').text(year + '.' + month + '.' + day + ' ' + hour + ":00");
}

// 获取到当前点击的日期的月份
function GetClickMonth() {
    let day_list = $('.calendar-body div[class="day current"]');  // 获取到c-body中的每一个日期的div
    let year_month_day = day_list[0].id.split('-');
    let year_month = year_month_day[0] + '-' + year_month_day[1];
    $('.date-today').text(year_month);
    return year_month;
}
// 图表相关
function MyCharts(month_order_count,total_profit) {
    var DomEle = $('#charts')[0];
    var myChart = echarts.init(DomEle);
    var option;
    const colors = ['#5470C6', '#EE6666'];
    option = {
        color: colors,
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            }
        },
        grid: {
            right: '20%'
        },
        toolbox: {
            feature: {
                dataView: {show: true, readOnly: false},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        legend: {
            data: ['订单量','订单金额']
        },
        xAxis: [
            {
                type: 'category',
                axisTick: {
                    alignWithLabel: true
                },
                // prettier-ignore
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '订单量',
                position: 'left',
                alignTicks: true,
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: colors[0]
                    }
                },
                axisLabel: {
                    formatter: '{value} 个'
                }
            },
            {
                type: 'value',
                name: '订单金额',
                position: 'right',
                alignTicks: true,
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: colors[1]
                    }
                },
                axisLabel: {
                    formatter: '{value} ￥'
                }
            },
        ],
        series: [
            {
                name: '订单量',
                type: 'bar',
                data: month_order_count
            },
            {
                name: '订单金额',
                type: 'line',
                yAxisIndex: 1,
                data: total_profit
            }
        ]
    };
    myChart.setOption(option);
}

